<template>
	<view>
		<view class="theMatter-content">
			<view v-for="item in list" :key="item.reptCD">
				<view class="timeTitle">
					<image src="../../../static/images/survey.png" />
					<text v-text="item.reptCD"></text>
				</view>
				<view class="mui-table-view">
					<view class="item-list" v-for="(son,sonindex) in item.reportThingList" :key="sonindex" @click="orderDetails(son)">
						<view class="title">
							<text class="iconfont icon-2"></text>
							<text class="text" v-text="son.reptDetails"></text>
						</view>
						<view class="son-time">
							<text class="time">提交时间：</text>
							<text v-text="son.reptCD"></text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import util from "../../../utils/util.js"
	import {
		reportMatterModule
	} from "../../../modules/reportMatter.js"
	const reportMatter = new reportMatterModule()
	export default {
		data() {
			return {
				list: []
			};
		},
		onLoad() {
			reportMatter.getHisory()
				.then((res) => {
					this.list = res
				})
		},
		methods: {
			orderDetails(son) {
				let data = {
					gtaID: son.gtaID,
					rouID: son.reptID,
					rouType: 4,
					sate: 4
				}
				uni.navigateTo({
					url: `/pages/workOrder/details/details?data=${JSON.stringify(data)}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "../../../common/scss/common.scss";
	@import "../../../common/scss/iconfont.css";

	.theMatter-content {

		/* .title-fiexd {
	        position: fixed;
	        top: ws(44);
	        left: 0;
	        width: 100%;
	        z-index: 9;
	    } */
		.timeTitle {
			background-color: #F6F6F6;
			padding: 0 ws(15);
			height: 50px;
			display: flex;
			align-items: center;
			font-size: ws(16);
			color: #333;

			>image {
				width: ws(25);
				height: ws(25);
				margin-right: ws(10);
			}
		}
		.mui-table-view{
			background-color: #F6F6F6;
			padding-bottom: ws(15);
		}
		.item-list {
			display: flex;
			padding: ws(20) ws(15);
			margin: 0 ws(15);
			flex-direction: column;
			justify-content: center;
			background-color: #fff;
			color: #000;
			border-radius: ws(5);
			box-shadow: 0 ws(1) ws(4) 0 rgba(7, 17, 27, 0.1);
			margin-bottom: ws(15); 

			&:last-child {
				margin-bottom: 0; 
			}

			.title {
				
				display: flex;
				align-items: flex-start;
				.iconfont{
					color: #2A83FF;
					font-size: ws(25);
					margin-right: ws(5);
				}
				.text{
					margin-top: ws(2);
					width: ws(355);
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}

			.son-time {
				border-top: 1upx solid #eee;
				margin-top: ws(15);
				padding-top: ws(15);
				color: #999;
				font-size: ws(14);
				display: flex;
				align-items: center;
				justify-content: space-between;
				.time{
					color: #666;
				}
			}
		}
	}
</style>
